Cuando se prueba una instantánea (instantánea de broma) de un componente que está conectado a la tienda redux, puedo exportar el componente real además del componente conectado
// User.js /* ... */ export class User extends React.Component {/* ... */} /* ... */ export default connect(mapStateToProps)(User);En el archivo de prueba, puedo importar el componente real (no la versión conectada) y realizar pruebas instantáneas en él.
// User.spec.js import { User } from './User'; /* ... toMatchSnapshot() testing */ Pero me encuentro con problemas cuando un componente conectado está anidado dentro de otro componente conectado. Por ejemplo, supongamos que el componente de User está anidado dentro de otro componente conectado:
// Wrapper.js import User from './User'; // importing the connected version /* ... */ export class Wrapper extends React.Component { /* ... */ render() { return ( <div> /* ... */ <User /> </div> ); } } export default connect(mapStateToProps)(Wrapper); Cuando ejecuto la prueba de instantánea en Wrapper de la misma manera que lo hice en User , aparece el siguiente error:
Invariant Violation: Could not find "store" in either the context or props of "Connect(User)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(User)".`¿Hay alguna forma de renderizar superficialmente cuando se toman instantáneas? ¿O estoy haciendo algo mal?
En este caso, la mejor manera es probar el Wrapper solo burlándose del User
import Wrapper from './Wrapper' jest.mock('./User', () => 'User') // note that the path to user is relative the test file not to the Wrapper.js file. Esto reemplazará al User con un componente simple con el nombre User .
Solo un pequeño ajuste a la respuesta proporcionada por @ andreas-köberle, ya que puede producir el error: using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
Para solucionarlo, si desea simular un componente, debe devolver un fn. El ejemplo refleja la denominación de varias palabras:
jest.mock('./User', () => () => 'UserThingStuff')
o para devolver un elemento HTML:
jest.mock('./User', () => 'user-thing-stuff')
Puede agregar una tienda simulada y luego probar el componente sin conexión, pero con componentes de conexión anidados ↓
Componente sin conexión, pero incluye elementos conectados anidados ->
pruebe con la tienda simulada, qué estado puede configurar.↓ antes de la prueba: npm install redux-mock-store --save-dev
prueba.js ↓
import configureStore from "redux-mock-store"; import {Provider} from "react-redux"; //create mockStore let mockStore; //create Obj for config store const mockStoreConf = configureStore([]); //configure store (add states) mockStore = mockStoreConf({ someStateInMockStore: `SomeValueFromMockKetInMockStore`, }); const tree = renderer.create( <Provider store={mockStore}> <Component /> </Provider> ); expect(tree).toMatchSnapshot();Ahora los hijos conectados anidados de su Componente toman el estado de su mockStore. Simplemente agregue los estados necesarios en el paso de configuración (//configure store (agregar estados)).
información de https://www.robinwieruch.de/react-connected-component-test